<template>
  <div class="scroll-content" >
    <div class="" ref="scrollView"  :class="isShow ? 'show-scroll' : ''" :style="{opacity:isShow?1:0}">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false,
    };
  },
  mounted() {
    this.handleScroll()
    window.addEventListener("scroll", this.handleScroll);
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.handleScroll);
  },
  methods: {
    handleScroll() {
      const element = this.$refs.scrollView;
      if (element) {
        const position = element.getBoundingClientRect();
        if (position.top < window.innerHeight) {
          this.isShow = true;
        } else {
          this.isShow = false;
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>

.show-scroll {
  height: 100%;
  position: relative;
  animation-name: show;
  animation-duration: 2s;
}
@keyframes show {
  from {
    opacity: 0;
    top: 60px;
  }
  to {
    opacity: 1;
    top: 0;
  }
}
</style>